<template>
  <div>
    <el-form-item label="按钮文本">
      <el-input v-model="localData.fileText" clearable placeholder="按钮文本" />
    </el-form-item>
    <el-form-item label="文件列表类型">
      <el-radio-group v-model="localData.listType">
        <el-radio-button label="附件" value="text" />
        <el-radio-button label="照片墙" value="picture-card" />
        <el-radio-button label="缩略图" value="picture" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="文件大小限制">
      <el-input-number v-model="localData.fileSize" controls-position="right" placeholder="文件大小限制" :min="0" style="width: 100%">
        <template #suffix>
          <span>KB</span>
        </template>
      </el-input-number>
    </el-form-item>
    <el-form-item label="上传限制提示">
      <el-input v-model="localData.tip" clearable placeholder="上传限制提示" />
    </el-form-item>
    <el-form-item label="允许文件类型">
      <el-input v-model="localData.accept" clearable placeholder="image/png,image/jpg等" />
    </el-form-item>
    <el-form-item label="值信息">
      <el-select v-model="localData.bindAttrs.value" placeholder="请选择">
        <el-option v-for="item in valueOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <template v-if="localData.bindAttrs">
      <el-form-item v-for="item in bindAttrs" :key="item.value" :label="item.label">
        <el-cascader :props="CascaderProps" :options="attrList" v-model="localData.bindAttrs[item.value]" placeholder="请选择属性" filterable clearable :show-all-levels="false">
          <template #default="{ data: opt }">
            <span>{{ `${opt.entityDesc}(${opt.entityName})` }}</span>
          </template>
        </el-cascader>
      </el-form-item>
    </template>
    <el-form-item label="水印配置">
      <div class="setting-btns">
        <el-switch v-model="localData.showCanvas" />
        <el-button v-if="localData.showCanvas" type="primary" link @click="openCanvasDialog">配置</el-button>
        <span style="font-size: 12px; color: #aaa">开启水印后只能上传图片</span>
      </div>
    </el-form-item>
    <el-form-item label="上传配置">
      <div class="setting-btns">
        <el-button type="primary" link @click="openAjaxDialog">接口配置</el-button>
        <el-button type="primary" link @click="openParamsDialog">参数配置</el-button>
      </div>
    </el-form-item>

    <drag-dialog title="水印配置" v-model="showCanvasDialog" :close-on-click-modal="false">
      <el-form label-width="100px" label-position="right" label-suffix=":">
        <el-form-item label="水印文字">
          <el-input v-model="curEditCanvas.text" size="default" clearable placeholder="水印文字" />
        </el-form-item>
        <el-form-item label="字体类型">
          <el-input v-model="curEditCanvas.fontFamily" size="default" clearable placeholder="字体类型" />
        </el-form-item>
        <el-form-item label="字体颜色">
          <avue-input-color v-model="curEditCanvas.color" size="default" placeholder="字体颜色" />
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="curEditCanvas.fontSize" size="default" controls-position="right" placeholder="字体大小" style="width: 100%" />
        </el-form-item>
        <el-form-item label="文字的透明度">
          <el-input-number v-model="curEditCanvas.opacity" size="default" controls-position="right" placeholder="文字的透明度" :step="10" :min="10" :max="100" style="width: 100%" />
        </el-form-item>
        <el-form-item label="距底部距离">
          <el-input-number v-model="curEditCanvas.bottom" controls-position="right" placeholder="文字距离图片底部的距离" size="default" style="width: 100%" />
        </el-form-item>
        <el-form-item label="距右侧距离">
          <el-input-number v-model="curEditCanvas.right" controls-position="right" placeholder="文字距离图片右边的距离" size="default" style="width: 100%" />
        </el-form-item>
        <el-form-item label="图片压缩比">
          <el-input-number v-model="curEditCanvas.ratio" controls-position="right" placeholder="图片压缩比(0-1)" :step="0.1" :min="0" :max="1" size="default" style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <dialog-footer @ok="submitCanvas" @cancel="cancelCanvas" />
      </template>
    </drag-dialog>

    <drag-dialog title="上传接口设置" v-model="showAjaxDialog" :close-on-click-modal="false">
      <el-form label-position="right" label-width="100px" label-suffix=":">
        <custom-ajax-setting v-model="curEditAjax" :options="formJson" />
        <el-form-item label="成功后回调">
          <comp-call-config v-model="curEditAjax.customCallback" :fields="fields" :options="formJson" />
        </el-form-item>
      </el-form>
      <template #footer>
        <dialog-footer @ok="submitAjax" @cancel="cancelAjax" />
      </template>
    </drag-dialog>

    <drag-dialog title="上传参数设置" v-model="showParamsDialog" :close-on-click-modal="false">
      <el-form label-position="top" label-width="100px" label-suffix=":">
        <el-form-item label="上传中提示">
          <el-input v-model="curEditParams.loadText" clearable placeholder="上传中提示" />
        </el-form-item>
        <el-form-item label="返回结构体的层次的参数名">
          <el-input v-model="curEditParams.propsHttp.res" size="default" placeholder="返回结构体的层次" />
        </el-form-item>
        <el-form-item label="上传文件流时的名称的参数名">
          <el-input v-model="curEditParams.propsHttp.fileName" size="default" placeholder="使用平台默认参数file" />
        </el-form-item>
        <el-form-item label="上传成功返回结构体的图片地址的参数名">
          <el-input v-model="curEditParams.propsHttp.url" size="default" placeholder="使用平台默认参数url" />
        </el-form-item>
        <el-form-item label="上传成功返回结构体的图片名称的参数名">
          <el-input v-model="curEditParams.propsHttp.name" size="default" placeholder="使用平台默认参数name" />
        </el-form-item>
        <el-form-item label="其他设置">
          <el-checkbox v-model="curEditParams.dragFile" label="拖拽上传" />
          <el-checkbox v-model="curEditParams.drag" label="拖拽排序" />
          <el-checkbox v-model="curEditParams.showFileList" label="显示上传列表" />
          <el-checkbox v-model="curEditParams.multiple" label="多文件上传" />
        </el-form-item>
        <el-form-item v-if="curEditParams.multiple" label="多文件数量限制">
          <el-input-number v-model="curEditParams.limit" controls-position="right" placeholder="多文件上传数量限制" :min="1" style="width: 100%" />
        </el-form-item>
        <el-form-item label="自动上传">
          <el-switch v-model="curEditParams.autoUpload" />
        </el-form-item>
      </el-form>
      <template #footer>
        <dialog-footer @ok="submitParams" @cancel="cancelParams" />
      </template>
    </drag-dialog>
  </div>
</template>

<script>
import { useAnvilCodeStore } from '@code/components/anvil-code-low-common/store/modules/code';
import customAjaxSetting from '../../components/customAjaxSetting.vue';
import jp from 'jsonpath';
import { cloneDeep } from 'lodash-es';

export default {
  name: 'ConfigUpload',
  components: { customAjaxSetting },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formJson: {
      type: Object,
      default: () => {}
    },
    attrList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      option: {
        column: [
          {
            type: 'input',
            prop: 'key',
            label: 'key'
          },
          {
            type: 'input',
            prop: 'value',
            label: 'value'
          }
        ]
      },
      localData: {},
      CascaderProps: {
        value: 'entityName',
        label: 'entityDescName',
        children: 'childList',
        emitPath: false
      },
      valueOptions: [
        {
          label: '文件id',
          value: 'fileId'
        },
        {
          label: '存储id',
          value: 'storageId'
        }
      ],
      bindAttrs: [
        {
          label: '名称绑定属性',
          value: 'fileName'
        },
        {
          label: '后缀绑定属性',
          value: 'type'
        },
        {
          label: 'URL绑定属性',
          value: 'url'
        }
      ],
      showCanvasDialog: false,
      curEditCanvas: {},
      showAjaxDialog: false,
      curEditAjax: {},
      showParamsDialog: false,
      curEditParams: {}
    };
  },
  computed: {
    fields() {
      return this.getCallableCompList(this.formJson);
    }
  },
  watch: {
    data: {
      handler(ret) {
        if (ret) {
          this.initBindAttrs(ret);
          this.localData = ret;
        }
      },
      immediate: true
    },
    'localData.prop': {
      handler() {
        if (!this.avueVersion('2.9.0') && this.localData.drag != undefined) {
          this.localData.dragFile = this.localData.drag;
          delete this.localData.drag;
        }
      },
      immediate: true
    },
    'localData.drag': function (val) {
      if (!this.avueVersion('2.9.0')) return;
      if (val) {
        delete this.localData.listType;
      }
    },
    'localData.dragFile': function (val) {
      if (val) {
        delete this.localData.listType;
      }
    },
    'localData.showCanvas'(val) {
      if (val) {
        this.localData.canvasOption = {};
        this.localData.accept = 'image/*';
      } else {
        delete this.localData.canvasOption;
      }
    },
    'localData.listType'(val) {
      if (val.includes('picture')) {
        this.localData.fileType = 'img';
      } else {
        this.localData.fileType = undefined;
      }

      if (val == 'picture-img') {
        this.localData.valueType = 'string';
      } else {
        this.localData.valueType = 'array';
      }
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    },
    formJson: {
      handler(newVal) {},
      deep: true
    }
  },
  methods: {
    // 老数据兼容操作
    initBindAttrs(data) {
      if (!data.propsHttp) {
        data.propsHttp = {
          url: '',
          res: '',
          name: '',
          fileName: ''
        };
      }
      if (!data.bindAttrs) {
        data.bindAttrs = {};
      }
      if (!data.ajaxSetting) {
        data.ajaxSetting = {
          params: {
            withFormData: true
          }
        };
      }
    },
    openCanvasDialog() {
      this.curEditCanvas = cloneDeep(this.localData.canvasOption || {});
      this.showCanvasDialog = true;
    },
    submitCanvas() {
      this.localData.canvasOption = this.curEditCanvas;
      this.cancelCanvas();
    },
    cancelCanvas() {
      this.showCanvasDialog = false;
    },
    openAjaxDialog() {
      this.curEditAjax = cloneDeep(this.localData.ajaxSetting || {});
      this.showAjaxDialog = true;
    },
    submitAjax() {
      this.localData.ajaxSetting = this.curEditAjax;
      this.action = this.curEditAjax.url;
      this.cancelAjax();
    },
    cancelAjax() {
      this.showAjaxDialog = false;
    },
    openParamsDialog() {
      this.curEditParams = cloneDeep(this.localData || {});
      this.showParamsDialog = true;
    },
    submitParams() {
      for (let key in this.curEditParams) {
        this.localData[key] = this.curEditParams[key];
      }
      this.cancelParams();
    },
    cancelParams() {
      this.showParamsDialog = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.setting-btns {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 8px;
}
</style>
